<template>
	<view class="qiun-charts">
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartData" :opts="opts" />
		</view>
		<view style="margin-left: 60rpx;align-self: flex-start;">
		  <view class="item-scores">
			<view style="background-color: #A3F680;" class="item-color"></view>
			<view class="item-name">优秀</view>
			<view>5分</view>
		  </view>
		  <view class="item-scores">
			<view style="background-color: #DDFD30;" class="item-color"></view>
			<view class="item-name">良好</view>
			<view>4分</view>
		  </view>
		  <view class="item-scores">
			<view style="background-color: #FFFF00;" class="item-color"></view>
			<view class="item-name">合格</view>
			<view>3</view>
		  </view>
		  <view class="item-scores">
			<view style="background-color: #FFAB00;" class="item-color"></view>
			<view class="item-name">需努力</view>
			<view>2分</view>
		  </view>
		</view>
	</view>
</template>

<script>
	const barColors = ['#FFAB00', '#FFFF00', '#DDFD30', '#A3F680'];

	export default {
		name: 'AssessScoresChart',
		props: {
			dimensionScores: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				chartData : {},
				opts: {
					"dataLabel": false,
				}
			}
		},

		created() {
			this.initData();
		},

		methods: {
		  getResult(value, barColors) {
			  console.log(value)
			let color = '';
			let str = '';
			if (value <= 2) {
			  color = barColors[0];
			  str = '需努力'
			} else if (value === 3) {
			  color = barColors[1]
			  str = '合格'
			} else if (value === 4) {
			  color = barColors[2]
			  str = '良好'
			} else if (value === 5) {
			  color = barColors[3]
			  str = '优秀'
			} else {
			  color = barColors[0]
			  str = '需努力'
			}
			console.log(color)
			return {
			  color,
			  str
			}
		  },

			initData() {
				const that = this;
				let label = [],
				  devArr = [];
				let seriesArray = [];

				this.$props.dimensionScores.map(x => {

				  label.push(x.dimension);
				  devArr.push({
					value: parseFloat(x.rankVal),
					itemStyle: {
					  color: this.getResult(x.rankVal, barColors).color
					},
					label: {
					  show: true,
					  position: 'inside',
					  color: '#333333'
					},
					color: this.getResult(x.rankVal, barColors).color
				  })
				});
				seriesArray[0] = {
				  barGap: 0,
				  data: devArr,
				  type: 'bar',
				  showBackground: false,
				  backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				  }
				};

				var option = {
					title: {
						text: '发育商',
						textStyle: {
							fontSize: 14,
							color: '#50576a'
						},
						left: 'center',
						top: 0
					},
					color: barColors,
					dataZoom: [{
						preventDefaultMouseMove: false
					}],
					legend: {
						selectedMode: false
					},
					grid: {
						top: 40,
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: label,
						axisLabel: {
							rotate: 45,
							fontSize: 10,
						}
					},
					yAxis: {
						axisLabel: {
							show: true,
							fontSize: 10,
						},
						type: 'value',
						max: 150,
						min: 0,
					},
					series: seriesArray,
					categories: label
				};
				console.log(option);
				this.chartData = option;
			}
		}
	}
</script>

<style>
	.charts-box {
	  width: 100%;
	  height: 300px;
	}
	
	.qiun-charts {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.item-scores {
		display: flex;
		flex-direction: row;
		color: #50576a;
		font-size: 24rpx;
		align-items: center;
		margin-top: 5rpx;
	}

	.item-color {
		width: 30rpx;
		height: 30rpx;
	}

	.item-name {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
</style>
